<template>
	<view class="jf-navigation">
		<view
			class="jf-navigation_box" 
			:style="{
				'paddingTop': top + 'rpx',
				'borderColor': props.showBorder ? '#E7EAEE' : 'transparent',
				'background': props.through ? props.background : props.background || '#ffffff'
			}">
			<view class="jf-navigation_title" :style="{'top': top + 'rpx'}">
				<slot></slot>
			</view>
			<view class="jf-navigation_left">
				<view class="jf-navigation_back" v-if="pages.length > 1 && props.showBack" @click="navBack()">
					<slot name="back">
						<image :src="props.backIcon" class="jf-navigation_back_icon"></image>
					</slot>
				</view>
				<slot name="left"></slot>
			</view>
			<view class="jf-navigation_right">
				<slot name="right"></slot>
			</view>
		</view>
	</view>
	<view class="jf-navigation_block" v-if="!props.through" :style="{'height': top + 88 + 'rpx'}"></view>
</template>

<script lang="ts" setup>
	import backIcon from "@/static/images/navigation/back001.png"
	import { onMounted, nextTick } from "vue"
	
	const props = withDefaults(defineProps<{
		through?: boolean
		showBorder?: boolean
		background?: string
		beforeBack?: any
		showBack?: boolean
		backIcon?: string
	}>(),{
		through: false,
		showBorder: false,
		background: "",
		beforeBack: null,
		showBack: true,
		backIcon: backIcon
	})
	const emits = defineEmits<{
		(e:"getHeight", height: number)
	}>()
	
	const pages = getCurrentPages();
	const systemInfo = uni.getSystemInfoSync()
	const ratio = 750 / systemInfo.screenWidth
	const top = systemInfo.safeArea.top * ratio
	
	
	const navBack = ()=>{
		if(props.beforeBack){
			props.beforeBack().then(()=>{
				uni.navigateBack();
			})
		}else{
			uni.navigateBack();
		}
	}
	
	onMounted(()=>{
		nextTick(()=>{
			emits("getHeight", top + 90)
		})
	})
</script>

<style lang="scss">
	.jf-navigation{
		position: fixed;
		z-index: 998;
		left: 0;
		top: 0;
		width: 100%;
		.jf-navigation_box{
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			width: calc(100% - 60rpx);
			height: 88rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			border-bottom: 2rpx solid;
			.jf-navigation_title{
				position: absolute;
				left: 0;
				width: 100%;
				line-height: 88rpx;
				text-align: center;
				font-size: 36rpx;
				color: #141B24;
			}
			.jf-navigation_left{
				flex-grow: 1;
				position: relative;
				height: 88rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				.jf-navigation_back{
					position: relative;
					.jf-navigation_back_icon{
						width: 44rpx;
						height: 44rpx;
					}
				}
			}
			.jf-navigation_right{
				margin-left: auto;
				position: relative;
				height: 88rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;
			}
		}
	}
	.jf-navigation_block{
		width: 100%;
	}
</style>
